<template>
    <div class="ui-tooltip" ref="tooltip" role="tooltip" :id="id">
        <slot></slot>
    </div>
</template>

<script>
import Tooltip from 'tether-tooltip';
import UUID from './helpers/uuid';

export default {
    name: 'ui-tooltip',

    props: {
        trigger: {
            type: String,
            required: true
        },
        position: {
            type: String,
            default: 'bottom center'
        },
        openOn: {
            type: String,
            default: 'hover focus'
        },
        openDelay: {
            type: Number,
            default: 0
        }
    },

    data() {
        return {
            tooltip: null,
            id: UUID.short('ui-tooltip-')
        };
    },

    watch: {
        trigger() {
            if (this.tooltip === null) {
                this.initialize();
            }
        }
    },

    mounted() {
        if (this.tooltip === null) {
            this.initialize();
        }
    },

    beforeDestroy() {
        if (this.tooltip !== null) {
            this.tooltip.destroy();
        }
    },

    methods: {
        initialize() {
            if (this.trigger !== undefined && this.$parent.$refs[this.trigger]) {
                const triggerEl = this.$parent.$refs[this.trigger]._isVue ?
                    this.$parent.$refs[this.trigger].$el : // Use .$el if the ref is a Vue component
                    this.$parent.$refs[this.trigger];

                this.tooltip = new Tooltip({
                    target: triggerEl,
                    content: this.$refs.tooltip,
                    classes: 'ui-tooltip--theme-default',
                    position: this.position,
                    openOn: this.openOn,
                    openDelay: this.openDelay
                });

                triggerEl.setAttribute('aria-describedby', this.id);
            }
        }
    }
};
</script>

<style lang="scss">
@import './styles/imports';

$tooltip-content-margin: rem-calc(4px) !default;

.ui-tooltip {
    line-height: 1;
}

// The following classes are unprefixed and not BEM
// because they are generated by Tether Tooltip

.tooltip-element,
.tooltip-element:after,
.tooltip-element:before,
.tooltip-element *,
.tooltip-element *:after,
.tooltip-element *:before {
    box-sizing: border-box;
}

.tooltip-element {
    display: none;
    opacity: 0;
    position: absolute;
    transition: opacity 0.2s;
}

.tooltip-element.tooltip-open {
    display: block;
}

.tooltip-element.tooltip-after-open {
    opacity: 1;
}

.tooltip-element.ui-tooltip--theme-default {
    max-height: 100%;
    max-width: 100%;
    pointer-events: none;
    z-index: $z-index-tooltip;

    .tooltip-content {
        align-items: center;
        background: $md-grey-900;
        border-radius: $ui-default-border-radius;
        color: white;
        display: flex;
        font-family: inherit;
        font-size: rem-calc(13px);
        height: rem-calc(26px);
        line-height: 1;
        opacity: 0.9;
        padding: rem-calc(0 8px);
        position: relative;
    }

    &.tooltip-element-attached-bottom.tooltip-element-attached-center .tooltip-content {
        margin-bottom: $tooltip-content-margin;
    }

    &.tooltip-element-attached-top.tooltip-element-attached-center .tooltip-content {
        margin-top: $tooltip-content-margin;
    }

    &.tooltip-element-attached-right.tooltip-element-attached-middle .tooltip-content {
        margin-right: $tooltip-content-margin;
    }

    &.tooltip-element-attached-left.tooltip-element-attached-middle .tooltip-content {
        margin-left: $tooltip-content-margin;
    }

    &.tooltip-element-attached-top.tooltip-element-attached-left.tooltip-target-attached-bottom .tooltip-content {
        margin-top: $tooltip-content-margin;
    }

    &.tooltip-element-attached-top.tooltip-element-attached-right.tooltip-target-attached-bottom .tooltip-content {
        margin-top: $tooltip-content-margin;
    }

    &.tooltip-element-attached-bottom.tooltip-element-attached-left.tooltip-target-attached-top .tooltip-content {
        margin-bottom: $tooltip-content-margin;
    }

    &.tooltip-element-attached-bottom.tooltip-element-attached-right.tooltip-target-attached-top .tooltip-content {
        margin-bottom: $tooltip-content-margin;
    }

    &.tooltip-element-attached-top.tooltip-element-attached-right.tooltip-target-attached-left .tooltip-content {
        margin-right: $tooltip-content-margin;
    }

    &.tooltip-element-attached-top.tooltip-element-attached-left.tooltip-target-attached-right .tooltip-content {
        margin-left: $tooltip-content-margin;
    }

    &.tooltip-element-attached-bottom.tooltip-element-attached-right.tooltip-target-attached-left .tooltip-content {
        margin-right: $tooltip-content-margin;
    }

    &.tooltip-element-attached-bottom.tooltip-element-attached-left.tooltip-target-attached-right .tooltip-content {
        margin-left: $tooltip-content-margin;
    }
}
</style>
